@charset "utf-8";

@import "common/reset";
@import "common/iconfont";

.web{
    background: #f3f4f6;
    position:absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    overflow: hidden;
}
header{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    .nav{
        height: 50px;
        width: 100%;
        background: #f7f7f7;
        border-bottom: 1px solid #c1c1c1;
        display: flex;
        justify-content: space-around;
        align-items: center;
        h1{
            font-size: 24px;
            font-weight: normal;
            flex: .8;
            text-align: center;
        }
        >a{
            text-decoration: none;
            font-size: 18px;
            color: #333;
        }
        >p{
            font-size: 18px;
            color: #333;
        }
    }
}
.content{
    position: absolute;
    top: 50px;
    bottom: 55px;
    width: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling:touch;
    .information{
        height: 200px;
        width: 100%;
        background: #4a5fb7;
        text-align: center;
        padding-top: 6%;
        position: relative;
        margin-bottom: 4%;
        >a:first-of-type{
            font-size: 36px;
            color: #fefefe;
            display: block;
        }
        >a:nth-of-type(2){
            font-size: 16px;
            color: #fefefe;
            display: block
        }
        .record{
            height: 60px;
            width: 100%;
            position: absolute;
            bottom: 0;
            display: flex;
            justify-content: space-around;
            .rec_content{
                background: rgba(0,0,0,.1);
                width: 33%;
                padding-top: 3%;
                >p{
                    width: 80%;
                    margin: 0 auto 1% auto;
                    font-size: 14px;
                    color: #fff;
                    overflow-x: hidden;
                    overflow-y: auto;
                    text-overflow: ellipsis;
                }
                >span{
                    font-size: 14px;
                    color: #fff;
                }
            }
            .order_form{
                >p{
                    position: relative;
                    &::after{
                        position: absolute;
                        right: 33%;
                        content: "";
                        width: 6px;
                        height: 6px;
                        background: #e33030;
                        border: 1px solid #e1e1e3;
                        border-radius: 50%;
                    }
                }
            }
            .sales_volume{
                font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;
                >p{
                    &::before{
                        content: "\e634";
                    }
                }
            }
        }
    }
    .add_commodity{
        height: 34px;
        width: 94%;
        margin: 0 auto 4% auto;
        text-align: center;
        background: #fff;
        border: 1px solid #e3e3e3;
        border-radius: 4px;
        padding-top: 1%;
        >h1{
            &::before{
                content: "\e66f";
                font-size: 18px;
                color: #FD3636;
                margin-right: 2%;
            }
            font-size: 16px;
            color: #fd3636;
            font-weight: normal;
        }
    }
    .function_menu{
        width: 100%;
        background: #fff;
        .func_menu_1{
            display:flex;
            justify-content: space-around;
            align-items: center;
        }
        .func_menu_2{
            display:flex;
            justify-content: space-around;
            align-items: center;
        }
        .menu_content{
            width: 34%;
            border-top: 1px solid #e3e3e3;
            border-left: 1px solid #e3e3e3;
            text-align: center;
            padding: 8% 0;
            display: inline-block;
            .img_wrap{
                width: 50%;
                margin: 0 auto 2% auto;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            >p{
                font-size: 14px;
                color: #999;
            }
        }
    }
}

footer{
    position: absolute;
    left: 0;
    bottom: 0;
    height: 58px;
    width: 100%;
    background: #fefefe;
    border-top: 1px solid #c1c1c1;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-top: 1%;
    .downav_content{
        width: 25%;
        text-align: center;
        font-size: 0;
        .wrap_img{
            width: 35%;
            margin: 0 auto 1% auto;
            img{
                width: 100%;
            }
        }
        >p{
            font-size: 12px;
            color: #333;
        }
    }
}

//推广页
.generalize{
    height: 0;
    width: 100%;
    background: rgba(0,0,0,.5);
    position: absolute;
    left: 0;
    overflow: hidden;
    transition: all .4s, opacity 1s;
    transform: translateY(100%);
    opacity: 0;
    .gen_content{
        position: absolute;
        bottom: 58px;
        background: #fff;
        height: 54%;
        width: 100%;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        padding: 6% 5%;
        .menu{
            width: 33%;
            text-align: center;
            .img_w{
                width: 50%;
                margin: 0 auto;
                img{
                    width: 100%;
                }
            }
            >p{
                font-size: 16px;
                color: #999;
                margin-bottom: 2%;
            }
        }
    }
    footer{
        >p{
            color: #333;
        }
    }
}

//添加商品
.add_commodity_mes{
    height: 0;
    width: 100%;
    background: rgba(0,0,0,.5);
    position: absolute;
    left: 0;
    overflow: hidden;
    transition: all .4s, opacity 1s;
    transform: translateY(100%);
    opacity: 0;
    .add_commodity_content{
        position: absolute;
        bottom: 58px;
        background: #fff;
        height: 20%;
        width: 100%;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        padding: 7% 5% ;
        .menu{
            width: 33%;
            text-align: center;
            .img_w{
                width: 50%;
                margin: 0 auto 2% auto;
                img{
                    width: 100%;
                }
            }
            >p{
                font-size: 16px;
                color: #999;
            }
        }
    }
    footer{
        >p{
            color: #333;
        }
    }
}




.generalize_link{
    transform: translateY(0);
    opacity: 1;
    height: 100%;
}


.add_commodity_mes_link{
    transform: translateY(0);
    opacity: 1;
    height: 100%;
}
